import React, {Component} from 'react'
import { Menu, Icon } from 'antd';
import { Link, withRouter } from "react-router-dom";
import menuList from '../../config/menu-config'
import './main-navbar.less'

const { SubMenu } = Menu;

class MainNavbar extends Component{
    getMenuNodes = (menuList) => {
        const path = this.props.location.pathname
        return menuList.map( item => {
            if (!item.children){
                return(
                    <Menu.Item key={item.key}>
                        <Link to={item.key}>
                            <Icon type={item.icon} />
                            {item.title}
                        </Link>
                    </Menu.Item>
                )
            } else {
                const citem = item.children.find(citem => citem.key === path)

                if(citem) {
                    this.openKey = item.key
                }
                return(
                <SubMenu key={item.key} title={
                    <span className="submenu-title-wrapper">
                     <Icon type={item.icon} />
                        {item.title}
                    </span>
                }>
                    {
                        this.getMenuNodes(item.children)
                    }
                </SubMenu>
                )
            }
        })
    }
    componentWillMount() {
       this.menuNodes = this.getMenuNodes(menuList)
    }

    render() {
        const path = this.props.location.pathname
        const openKey = this.openKey
        return(
            <div style={{width:'100%'}}>
                <Menu className="main-navbar"
                      selectedKeys={[path]}
                      defaultOpenKeys={[openKey]}
                      mode="horizontal">
                    {
                        this.menuNodes
                    }
                </Menu>
            </div>
        )
    }
}
export default withRouter(MainNavbar)